<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link href="../../component/layui/css/layui.css" rel="stylesheet" />
	<link href="../../admin/css/pearCommon.css" rel="stylesheet" />
</head>
<body>
<body class="pear-container">
<div class="layui-card">
	<div class="layui-card-body">
		<form action="" class="layui-form">
			<div class="layui-form-item">
				<label class="layui-form-label">场景名称</label>
				<div class="layui-input-inline">
					<input class="layui-input" name="userName" placeholder="" type="text">
				</div>
				<!--		                    <label class="layui-form-label">要素格式</label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="username" placeholder="" class="layui-input">
                                            </div>-->
				<button class="pear-btn pear-btn-md pear-btn-primary" lay-filter="user-query" lay-submit>
					<i class="layui-icon layui-icon-search"></i>
					查询
				</button>
				<button class="pear-btn pear-btn-md" type="reset">
					<i class="layui-icon layui-icon-refresh"></i>
					重置
				</button>
			</div>
		</form>
	</div>
</div>
<div class="layui-card">
	<div class="layui-card-body">
		<table id="user-table" lay-filter="user-table"></table>
	</div>
</div>
</body>
<script id="user-toolbar" type="text/html">
	<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
		<i class="layui-icon layui-icon-add-1"></i>
		创建场景
	</button>
</script>

<script id="user-bar" type="text/html">
	<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked = "{{ d.enable == 0 ? 'true' : 'false' }}">
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">预览</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script id="user-edit" type="text/html">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
<script id="user-enable" type="text/html">
	<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked = "{{ d.enable == 0 ? 'true' : 'false' }}">
</script>

<script id="icon" type="text/html">
	<i class="layui-icon {{d.icon}}"></i>
</script>

<script id="service-status" type="text/html">
	{{#if (d.status == 1) { }}
	<span style="color: #338528;">启用</span>
	{{# }else if(d.status == 0){ }}
	<span>停用</span>
	{{# } }}
</script>
<script id="user-createTime" type="text/html">
	{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss')}}
</script>

<script src="../../component/layui/layui.js"></script>
<script>
	layui.use(['table','form','jquery'],function () {
		let table = layui.table;
		let form = layui.form;
		let $ = layui.jquery;

		let MODULE_PATH = "/system/user/";

		let cols = [
			[
				// {type:'checkbox'},
				{title: '缩略图', field: 'icon',templet:'#icon',align:'center',width:80},
				// {title: '要素分类', field: 'sex', align:'center', width:100, templet:'#user-sex'},
				{title: '场景名称', field: 'realName',sort: true, align:'center'},
				{title: '场景描述', field: 'phone', align:'center'},
				{title: '场景状态', field: 'status', sort: true,align:'center', templet:'#service-status'},
				// {title: '场景状态', field: 'enable', align:'center', templet:'#user-enable'},
				{title: '创建时间', field: 'createTime', sort: true,align:'center',templet:'#user-createTime'},
				{title: '更新时间', field: 'createTime',sort: true, align:'center',templet:'#user-createTime'},
				{title: '编辑', field: 'login', align:'center', templet:'#user-edit'},
				{title: '操作', toolbar: '#user-bar', align:'center', width:220}
			]
		]

		table.render({
			elem: '#user-table',
			url: '../../admin/data/sceneManage.json',
			page: true ,
			cols: cols ,
			skin: 'line',
			toolbar: '#user-toolbar',
			defaultToolbar: [{
				layEvent: 'refresh',
				icon: 'layui-icon-refresh',
			}, 'filter', 'print', 'exports']
		});

		table.on('tool(user-table)', function(obj){
			if(obj.event === 'remove'){
				window.remove(obj);
			} else if(obj.event === 'edit'){
				window .edit(obj);
			}
		});

		table.on('toolbar(user-table)', function(obj){
			if(obj.event === 'add'){
				window.add();
			} else if(obj.event === 'refresh'){
				window.refresh();
			} else if(obj.event === 'batchRemove'){
				window.batchRemove(obj);
			}
		});

		form.on('submit(user-query)', function(data){
			table.reload('user-table',{where:data.field})
			return false;
		});

		form.on('switch(user-enable)', function(obj){
			layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
		});

		window.add = function(){
			layer.open({
				type: 2,
				title: '新增',
				shade: 0.1,
				area: ['500px', '400px'],
				content: MODULE_PATH + 'add'
			});
		}

		window.edit = function(obj){
			layer.open({
				type: 2,
				title: '修改',
				shade: 0.1,
				area: ['500px', '400px'],
				content: MODULE_PATH + 'edit?userId='+obj.data['userId']
			});
		}

		window.remove = function(obj){
			layer.confirm('确定要删除该用户', {icon: 3, title:'提示'}, function(index){
				layer.close(index);
				let loading = layer.load();
				$.ajax({
					url: MODULE_PATH+"remove/"+obj.data['userId'],
					dataType:'json',
					type:'delete',
					success:function(result){
						layer.close(loading);
						if(result.success){
							layer.msg(result.msg,{icon:1,time:1000},function(){
								obj.del();
							});
						}else{
							layer.msg(result.msg,{icon:2,time:1000});
						}
					}
				})
			});
		}

		window.batchRemove = function(obj){
			let data = table.checkStatus(obj.config.id).data;
			if(data.length === 0){
				layer.msg("未选中数据",{icon:3,time:1000});
				return false;
			}
			let ids = "";
			for(let i = 0;i<data.length;i++){
				ids += data[i].userId+",";
			}
			ids = ids.substr(0,ids.length-1);
			layer.confirm('确定要删除这些用户', {icon: 3, title:'提示'}, function(index){
				layer.close(index);
				let loading = layer.load();
				$.ajax({
					url: MODULE_PATH+"batchRemove/"+ids,
					dataType:'json',
					type:'delete',
					success:function(result){
						layer.close(loading);
						if(result.success){
							layer.msg(result.msg,{icon:1,time:1000},function(){
								table.reload('user-table');
							});
						}else{
							layer.msg(result.msg,{icon:2,time:1000});
						}
					}
				})
			});
		}

		window.refresh = function(param){
			table.reload('user-table');
		}
	})
</script>
</body>
</html>
